/**
 * Created by niuroumian on 2017/6/28.
 */


/**
*@description 瀑布流构造函数
*@param {Number} windowWidth 可视区域宽度
*@param {Number} columnWidth 图片的列宽
*/
function Waterfall(windowWidth){
    this.columnWidth = 234;
    this.columnNumber = Math.floor(windowWidth/this.columnWidth);
    this.indexImage = 0;
}

//处理图片格式
Waterfall.prototype.getIndex = function(){
    var index = this.indexImage;
    if(index < 10){
        index = '00'+ index;
    }else{
        index = '0' + index;
    }
    return index;
};

//向容器中添加图片列
Waterfall.prototype.createColumn = function(){
    var container = document.getElementById('container');
    var html = '';
    for(var i=0; i < this.columnNumber; i++){
        var columnHtml = '';
        //初始加载5行图片
        for(var j=0; j< 5; j++){
            this.indexImage = i + this.columnNumber*j;
            //30张图片以后,从新循环加载
            if(this.indexImage > 30){
                this.indexImage = this.indexImage%30
            }
            var index = this.getIndex();
            columnHtml+= '<a href="javascript:void(0)" class="picture"><img src="img/P_'+index+'.jpg"></a>';
        }
        html += '<div id="column-'+i+'" class="column">'+columnHtml+'</div>';
    }
    container.innerHTML = html;
    var width = this.columnNumber*this.columnWidth;
    container.style.cssText = 'width: '+width+'px; margin: 0 auto';
    this.clickEvent(container);
};

//检测是否具有加载的条件
Waterfall.prototype.check = function(){
    var scrHeight = document.body.scrollTop || document.documentElement.scrollTop;
    var cliHeight = document.body.clientHeight || document.documentElement.clientHeight;
    for(var i=0; i < this.columnNumber; i++){
        var column = document.getElementById('column-'+i);
        if(column.offsetHeight < scrHeight + cliHeight){
            this.addImage(column);
        }
    }
};
//滚动时向列中添加图片
Waterfall.prototype.addImage = function(column){
    this.indexImage++;
    if(this.indexImage > 30){
        this.indexImage = this.indexImage%30
    }
    var index  = this.getIndex();
    var ele = document.createElement('a');
    ele.href = 'javascript:void(0)';
    ele.className = 'picture';
    var img = document.createElement('img');
    img.src = 'img/P_'+index+'.jpg';
    ele.appendChild(img);
    column.appendChild(ele);
};
//滚动监听
Waterfall.prototype.scrollListener = function(){
    var that = this;
    window.onscroll = function(){
        that.check();
    }
};
//利用冒泡事件 绑定每个图片的点击事件
Waterfall.prototype.clickEvent = function(box){
    box.onclick = function(){
        var event = window.event || arguments[0];
        var target = event.target || event.srcElement;
        //点击的不是img时，什么也不做
        if(!target.src){
            return false;
        }
        target.className = 'img-scale';
        target.style.marginTop = -(target.offsetHeight/2) + 'px';
        var div = document.createElement('div');
        var button = document.createElement('button');
        button.className = 'close-button';
        button.innerHTML = 'x';
        div.appendChild(button);
        div.appendChild(target);
        div.style.cssText =
            'background-color: rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; left: 0; top: 0;';
        document.querySelector('body').appendChild(div);
        button.onclick = function(){
            document.querySelector('body').removeChild(div);
        }
    }
};
//初始化
Waterfall.prototype.init = function(){
    this.createColumn();
    this.scrollListener();
};



//加载页面
window.onload = function () {
    var windowWidth = document.body.clientWidth || document.documentElement.clientWidth;
    var waterfall = new Waterfall(windowWidth);
    waterfall.init();
};
//浏览器窗口大小改变
window.onresize = function(){
    var windowWidth = document.body.clientWidth || document.documentElement.clientWidth;
    var waterfall = new Waterfall(windowWidth);
    waterfall.init();
};
